<template>
	<view class="all-box containers" style="margin-bottom:200rpx;">
		<view v-if="netWorkType!='none'">
			<!-- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton> -->
			<view class="container tui-skeleton" style="border-top: 1rpx solid #31bd71;">
				<!-- 日历 -->
				<view class="currentWeek padtop30">
					<view class="text-center">
						<text class="font36 font-white padright5" >{{data.list.health_day || 0}}</text><text class="font12 font-white">天</text>
					</view>
					<view class="font12 font-white text-center">你已坚持</view>
					<view class="flex-box pad-all15 padbottom35 padtop30">
						<view v-for="(item,index) in dateArr">
							<view class="week font-white font16 padbottom13">{{item.week}}</view>
							<view :class="[item.tag ? 'day font-white font14 border-circle' : 'day font-white font14']">{{item.day}}</view>
							
						</view>
					</view>
				</view>
				<!-- 日历end -->
				<view class="plan-list margin-all15">
					<view class="row bg-white pad-all10 border-radius4 padbottom15 margin-bottom15">
						<view class="flex-box padbottom17">
							<view class="flex-start-box">
								<view class="icon-img-view margin-right5">
									<image :src="OSS_HOST+'img/blood-pressure.png'"   class="publicImg" mode="widthFix"></image>
								</view>
								
								<text>血压测量（平均值）</text>
							</view>
							<view v-if="data.list.check_num<=0">
								未完成
							</view>
						</view>
						
						<view class="flex-start-box">
							<view class="f-item">
								<view class="font24 font-bold margin-bottom5">{{data.list.check_avg || '暂无数据'}}
								<text class="font12 font-normal">mmHg</text>
							</view>
							<!-- <view v-else class="f-item">暂无数据</view> -->
							<view class="font12 font-gray2">每日建议测量2-3次</view>
								
							</view>
							<view class="f-item">
								<view class="font-bold font24 margin-bottom5">{{data.list.check_num?data.list.check_num:0}}次</view>
								<view class="font12 font-gray2">今日检测次数</view>
							</view>
						</view>
					</view>
					
					<!-- <view class="row bg-white pad-all10 border-radius4 padbottom15 margin-bottom15">
						<view class="flex-box padbottom17">
							<view class="flex-start-box">
								<view class="icon-img-view margin-right5">
									<image src="../../../../static/img/sport.png" class="publicImg" mode="widthFix"></image>
								</view>
								
								<text>运动锻炼</text>
							</view>
							<view>
								未完成
							</view>
						</view>
						
						<view class="flex-start-box">
							<view class="">
								<view class="font24 font-bold margin-bottom5">2000<text class="font12 font-normal">步</text></view>
								<view class="font12 font-gray2">步行10000步，同步微信运动步数，<text>点击同步</text></view>
								
							</view>
							
						</view>
					</view> -->
					
					<view class="row bg-white pad-all10 border-radius4 padbottom15 margin-bottom15">
						<view class="flex-box padbottom17">
							<view class="flex-start-box">
								<view class="icon-img-view margin-right5">
									<image :src="OSS_HOST+'img/course.png'" class="publicImg" mode="widthFix"></image>
								</view>
								
								<text>健康小课堂</text>
							</view>
							<view>
								<!-- <text class="font12 font-gray2">查看更多</text>
								<text class="iconfont padleft5 font12 font-gray">&#xe62b;</text> -->
							</view>
						</view>
						
						<view @tap="pageArticleDetail(data.list.article.id)" class="flex-start-box row margin-bottom15 border-bottom prevent-blood" >
							<view class="pre-blood">
								<image class="pre-blood-img publicImg" :src="data.list.article.image" mode="widthFix"></image>
								
							</view>
							<view class="padleft15 content">
								<view class="over-ellipsis-two title">
									{{data.list.article.title || ''}}
								</view>
								<view class="desc font12 font-gray2 padtop10">
									{{data.list.article.create_time || ''}}								
								</view>
							</view>
							
							
						</view>
					</view>
					
					<view class="row bg-white pad-all10 border-radius4 padbottom15 margin-bottom15">
						<view class="flex-box padbottom17">
							<view class="flex-start-box">
								<view class="icon-img-view margin-right5">
									<image :src="OSS_HOST+'img/eat.png'" class="publicImg" mode="widthFix"></image>
								</view>
								
								<text>每日健康饮食</text>
							</view>
							<!-- <view>
								未完成
							</view> -->
						</view>
						
						<view class="flex-start-box">
							<view class="">
								<view class="font24 font-bold margin-bottom5">{{data.list.healthy_diet}}</view>
								<view class="font12 font-gray2">每日推荐饮食</text></view>
								
							</view>
							
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom" />

	</view>
</template>
<script>
	import {oss_host} from '@/config/config.js';
	import Vue from 'vue'
	import store from '@/store/index.js';
	// 公共底部
	import btabbar from '@/components/indexBottomTable/bottomtabbar.vue'
	import {FormatDate} from '@/utils/base.js'//降序函数
	import {initDate} from '@/utils/getCweek.js'
	import {
		mapGetters
	} from 'vuex';
	export default {
		components: {
			btabbar
		},
		computed: {
			//注册网络状态
			...mapGetters(['netWorkType', 'loginStatus'])
		},
		data() {
			return {
				OSS_HOST: oss_host,
				// 骨架屏
				skeletonShow: true,
				dateArr:[],
				fromFather: {
					member_id: '',
				},
				page: {
					currentPage: 1,
					size: 10,
				},


				data: {
					list_key:[],
					list:{}
				}
			}
		},
		onLoad(e) {
			this.fromFather.member_id = e.member_id;
			this.fromFather.date = e.date;
			this.getList()

		},
		onShow() {
			this.dateArr=initDate()
			
			

		},
		methods: {
			pageArticleDetail(id) {
				let _this = this
				this.$refer.setVilit('/packageArticle/pages/healthy-article/article_detail')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				var data = {
					id: id
				}
				this.$refer.toUrl(callback, data)
				return
			},
			
			getList() {
				let _this = this
				let opt = {
					url: '/health_plan/index',
					method: 'get',
					data: {
						member_id: _this.fromFather.member_id,
						date:_this.fromFather.date
						// size: this.page.size,
						// page: this.page.currentPage
					},
					success: function(res) {
						// console.log(res)
						if (res.status == 1) {
							_this.skeletonShow = false;
							_this.data.list=res.data.data
							
							
						} else {
			
						}
			
					}
				};
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}
			
			},
		
			

		}
	}
</script>

<style lang="scss">
	@import "./healthy_plan.scss";
</style>
